<template>
  <div>
      <p>vuex</p>
      <p>{{$store.state.age}}--{{age}}</p>
      <button @click="ageAdd">年龄+1</button>
      <button @click="comAgeAdd">年龄+1(辅助函数)</button>
      <p>{{$store.state.hobby}}</p>
      <hr>
      <!-- <p>{{$store.getters.nextAge}}</p>
      <p>{{$store.getters.nextAge}}</p> -->
      <!-- <p>{{comNextAge}}</p> -->
      <hr>
      <p>余额:{{$store.state.money}}-{{money}}</p>
      <input type="text" placeholder="请输入金额" v-model="val1" @keyup.enter="recharge">
      <button @click="rechargeObj">充值（对象）</button>
      <button @click="comRecharge(val1*1)">充值（辅助函数）</button>
      <br>
      <button @click="getData">获取酷玩-1</button>
      <button @click="getDataA">获取酷玩-2</button>
      <hr>
      <p>模块</p>
      <p>{{$store.state.mGoods.list}}</p>
      <p>{{$store.state.mUser}}</p>
  </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'  // 辅助函数，可以省略this.$store
import {myRecharge} from '../store/mutation-types'
export default {
  data() {
    return {
      val1: ''
    }
  },
  computed: {
    myCom() { // 这是自己的计算属性
      return 'xxx'
    },
    // 这是映射进来的数据 map-映射
    // mapState = mapStateToComponent 数据不是真的给了组件 而是从store中映射过去的
    ...mapState(['age', 'money']), //  不改名就用数组
    // ...mapGetters({
    //   'comNextAge': 'nextAge' // 改名就写对象 {新名字：老名字}
    // })
  },
  methods: {
    ...mapMutations({
      'comAgeAdd': 'myAddAge',
      'comRecharge': 'myRecharge'
    }),
    ageAdd() {
      // 要去修改vuex的数据 不是自己的数据
      // 在组件中通知sotre 去修改数据（在组件中提交请求，由store中的mutation处理）
      this.$store.commit('myAddAge');
    },
    // 充值
    recharge() {
      console.log(this.val1);
      // 如果数据很多 就放在数组中 一次性传完 第二个参数的位置
      this.$store.commit(myRecharge, this.val1*1);
    },
    rechargeObj() {
      // 对象风格的提交方式 commit里面是一个对象
      this.$store.commit({
        type: 'myRechargeObj', // 这里写要触发的mutation的类型
        money: this.val1*1 // 这里写要传给mutation的数据
      });
    },
    // 获取后台数据 并保存在vuex中
    // 可以 用action实现 也可以不写action 先发请求然后用mutation保存数据
    getData() {
      this.http('/play/category')
      .then(res => {
        //  到了log这一步 就已经是同步了 可以使用mutation了 
        // vuex的约定是不能在mutation中使用异步 但是可以在异步函数中使用mutation 
        console.log(res);
        this.$store.commit('savePlay', res)
      })
    },
    getDataA() {
      this.$store.dispatch('savePlayA')
    }
  }
}
</script>

<style>

</style>